<template>
  <view class="TopicRule">
    <view class="head flex flex-row between">
      <view class="title">抽取试题内容</view>
      <view class="score">试卷共计：<label>{{ sumData.sumNum }}</label>
        题&nbsp;&nbsp;总计：<label>{{ sumData.sumScore }}</label> 分
      </view>
    </view>
    <view style="height: 3px" class="line"></view>
    <view v-for="(item,index) in exQuestionList" :key="index">
      <view class="top-exQuestionList">
        <view class="level">
          <view class="level-name flex flex-row">
            <u-icon name="minus-circle" color="red" size="22" @click="removeLevel(index)"></u-icon>
            <view style="margin-left: 6px">{{ item.levelName }}</view>
          </view>
          <view class="level-desc">
            闯关机会：{{ item.passLevel }}次&nbsp;&nbsp;过关条件>={{ item.passRate }}%
          </view>
        </view>

        <view class="head flex flex-row ">
          <view class="f_1">题型</view>
          <view class="score">分值</view>
          <view class="operate">操作</view>
        </view>
        <view class="body">
          <view class="flex flex-row item" v-for="(obj,objIndex) in item.exQuestionList" :key="objIndex">
            <view class="flex flex-row title f_1">
              <u-icon name="minus-circle" color="red" size="22" @click="remove(objIndex,item.levelName)"></u-icon>
              <view style="margin-left: 6px">{{ obj.topicTypeLabel }}({{ obj.cnt }})</view>
            </view>
            <view class="score">{{ obj.score }}分</view>
            <view class="operate flex flex-row between">
              <view @click="moveUp(objIndex,item.levelName)">上移</view>
              <view @click="moveDown(objIndex,item.levelName)">下移</view>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 3px" class="line" v-if="(index+1)!==exQuestionList.length"></view>
    </view>

  </view>

</template>
<script>
export default {
  name: "TopicList",
  inject: ["pro_practiceType"],
  props: {
    exQuestionList: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    sumData() {
      let sumNum = 0;
      let sumScore = 0;
      console.log(this.exQuestionList, 'sdssd')
      this.exQuestionList.forEach(item => {
        item.exQuestionList.forEach(obj => {
          sumNum += parseInt(obj.cnt);
          sumScore += parseInt(obj.cnt) * parseFloat(obj.score);
        })
      });
      return {sumNum, sumScore};
    }
  },
  data() {
    return {}
  },
  methods: {
    remove(index, levelName) {
      this.$emit("remove", {index, levelName});
    },
    moveUp(index, levelName) {
      this.$emit("moveUp", {index, levelName});
    },
    moveDown(index, levelName) {
      this.$emit("moveDown", {index, levelName});
    },
    removeLevel(index) {
      this.$emit("removeLevel", index);
    },
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.TopicRule {
  border-top-right-radius: 24rpx;
  border-top-left-radius: 24rpx;
  background-color: #FFFFFF;
  padding-top: 21px;

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }

  .level {
    padding: 20px 23px;
    border-bottom: 1px solid #EEEEEE;

    .level-name {
      font-size: 16px;
      color: #333333;
    }

    .level-desc {
      font-size: 14px;
      color: #999999;
      margin-top: 7px;
    }
  }

  .head {
    padding: 0 20px 16px 23px;

    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }

    .score {
      color: #333333;
      font-size: 28rpx;

      label {
        color: #37B874;
      }
    }
  }

  .top-exQuestionList {
    .head {
      color: #999999;
      font-size: 32rpx;
      padding: 20px 23px;
      border-bottom: 1px solid #EEEEEE;
    }

    .operate, .score {
      width: 84px;
      text-align: center;
      color: #999999;
      font-size: 32rpx
    }

    .operate {
      text-align: left !important;
    }
  }

  .body {
    font-size: 32rpx;
    color: #333333;

    .operate, .score {
      width: 84px;
      text-align: center;
      color: #333333;
      font-size: 32rpx
    }

    .item {
      border-bottom: 1px solid #EEEEEE;
      padding: 18px 23px;
    }

    .operate {
      color: #37B874;
    }
  }
}

</style>